<template>
  <el-dialog title="数据库数据表导入"
             :visible.sync="dialog.visible"
             append-to-body
             :fullscreen="true"
             :before-close="beforeClose"
  >
    <div style="width: 60%;margin: auto">
      <el-steps :active="stepsActive" align-center>
        <el-step title="选择数据表"></el-step>
        <el-step title="确认表单配置"></el-step>
      </el-steps>
    </div>
    <div class="margin-tb" style="height:calc(100% - 120px)">
      <div v-show="stepsActive===1">
        <avue-form ref="importDBTableModelForm" :option="importDBTableOption" @submit="dbTableSubmit"
                   v-model="importDBTableModel"></avue-form>
      </div>
      <div style="height: 100%" v-if="stepsActive===2">
        <monaco-editor ref="monacoEdit" v-model="formConfig"
                       keyIndex="import"
                       height="100%"></monaco-editor>
      </div>

    </div>
    <div slot="footer">
      <el-button v-if="stepsActive===1" type="primary" size="small" @click="$refs.importDBTableModelForm.submit()">
        下一步
      </el-button>
      <el-button v-if="stepsActive===2" type="primary" size="small" @click="stepsActive=1">上一步</el-button>
      <el-button v-if="stepsActive===2" type="primary" size="small" @click="confirmConfig">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import editImportDBTableOption from "./editImportDBTableOption";
import MonacoEditor from "../utils/monaco-editor";
// import sdrServiceApi from "@/api/sdrServiceApi";
import {deepClone} from "utils/util";


export default {
  name: "ImportDBTable",
  components: {MonacoEditor},
  computed: {
    importDBTableOption() {
      return editImportDBTableOption()
    }
  },
  props: {
    sqlTypeMapper: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      dialog: {
        visible: false,
      },
      stepsActive: 1,
      importDBTableModel: {},
      formConfig: {},
    }
  },
  methods: {
    show() {
      this.stepsActive = 1;
      this.importDBTableModel = {}
      this.dialog.visible = true
    },

    dbTableSubmit(formModel, done) {
      this.importDBTableModel = formModel
      // sdrServiceApi.listTableColumn(formModel.dataSourceKey, formModel.targetTableName).then(res => {
      //   this.formConfig = ImportDBTableTools.sqlFieldsToFormConfig(res.data, this.sqlTypeMapper)
      //   this.stepsActive = 2
      // }).finally(() => {
      //   done();
      // })
    },
    confirmConfig() {
      let ref = this.$refs.importDBTableModelForm.getPropRef("targetTableName")
      let dictData = ref.dic || [];
      let column = ref.column;
      let props = column.props || {label: "label", value: "value"}
      let selectItem = dictData.find(e => e[props.value] === this.importDBTableModel.targetTableName)
      let formConfig = this.$refs.monacoEdit._getValue();
      formConfig = deepClone(formConfig)
      let submit = {}
      submit.formConfig = formConfig;
      if (!selectItem) {
        submit.tableName = this.importDBTableModel.targetTableName;
        submit.tableNameCN = this.importDBTableModel.targetTableName;
      } else {
        submit.tableName = selectItem[props.value];
        submit.tableNameCN = selectItem[props.label];
      }
      console.log("submit", submit)
      this.$emit("submit", submit, this.beforeClose)
    },
    beforeClose() {
      this.$refs.importDBTableModelForm.resetFields();
      this.stepsActive = 1;
      this.importDBTableModel = {}
      this.dialog.visible = false
    }
  },


}
</script>

<style scoped>

</style>
